<template>
  <el-table
    v-loading="loading"
    :data="cptts" 
    style="width: 100%"
    @expand-change="expandchange"
    height="calc(100% - 48px)"
    border
    ref="tableRef"
    :row-key="({id})=>`tablerow-${id}`"
  >
    <el-table-column type="expand">
      <template v-slot="{row:{id,url}}">
        <el-skeleton :loading="!ctinfo[id]" animated>
          <template #template>
            <div class="flex">
              <el-avatar shape="square" class="shrink-0 mx-4" :size="200" :src="url" />
              <!-- <el-skeleton-item variant="image" class="shrink-0 mx-4" style="width: 200px; height: 200px" /> -->
              <div class="ml-7 w-full flex flex-col justify-evenly">
                <el-skeleton-item variant="p"
                  v-for="width in [56,84,53,76,69,88]"
                  :key="`${id}-loading-${width}`"
                 :style="{width:width+'%'}" />
              </div>
            </div>
            
          </template>
          <template #default>
            <div class="flex">
              有了有了
            </div>
          </template>
        </el-skeleton>
      </template>
    </el-table-column>
    <el-table-column label="UID" prop="uid" />
      <!-- <template #header>
        <el-input v-model="filterinfo.acc" size="small" placeholder="搜索账户" />
      </template>
    </el-table-column> -->
    <el-table-column label="NAME" prop="name" />
      <!-- <template v-slot="{ row:{ password } }" >
        <el-tooltip placement="top" effect="light" :show-after="1000" :content="password">
          <i><svg t="1650081548801" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2376" width="24" height="24"><path d="M896.426667 436.949333a611.584 611.584 0 0 0-112.896-136.618666l99.498666-99.498667a42.666667 42.666667 0 1 0-60.330666-60.330667l-682.453334 682.666667a42.666667 42.666667 0 1 0 60.330667 60.330667l108.117333-108.16a389.674667 389.674667 0 0 0 202.965334 56.704c206.037333 0 329.301333-153.6 384.725333-244.906667 27.733333-46.506667 27.733333-103.68 0-150.186667z m-384.768 267.093334a190.037333 190.037333 0 0 1-101.717334-29.994667l62.848-62.890667c12.032 4.736 25.088 7.552 38.826667 7.552a106.666667 106.666667 0 0 0 106.666667-106.666666c0-2.133333 0-3.413333-0.426667-5.546667-5.973333 3.413333-13.226667 5.546667-20.906667 5.546667a41.472 41.472 0 0 1-19.669333-5.418667l96.469333-96.512a190.293333 190.293333 0 0 1 29.824 101.930667c0 105.813333-86.101333 192-191.914666 192z m-327.552-37.546667c-20.906667-24.746667-40.106667-51.626667-56.746667-79.36a146.986667 146.986667 0 0 1-0.426667-150.186667c55.466667-91.306667 179.157333-244.906667 384.725334-244.906666 39.68 0 78.08 5.546667 117.333333 17.493333 7.253333 2.133333 12.8 8.106667 14.933333 15.36 1.706667 7.253333-0.426667 14.933333-5.973333 20.053333l-80.64 80.64c-14.506667-3.413333-29.866667-5.546667-45.653333-5.546666a192.256 192.256 0 0 0-186.368 238.08l-109.653334 109.653333c-4.266667 4.266667-9.386667 6.4-15.36 6.4h-0.853333a21.504 21.504 0 0 1-15.317333-7.68z" fill="#9254DE" p-id="2377"></path><path d="M797.610667 313.344a616.618667 616.618667 0 0 1 98.816 123.605333c11.008 18.517333 17.664 38.741333 19.925333 59.306667L587.946667 824.746667a394.368 394.368 0 0 1-76.288 7.338666c-65.792 0-127.957333-15.872-185.813334-46.933333l101.290667-101.333333c25.472 12.8 54.016 20.266667 84.522667 20.266666 105.813333 0 191.957333-86.186667 191.914666-192 0-30.421333-7.338667-59.093333-20.053333-84.650666z m-179.754667 193.152c0.426667 2.133333 0.426667 3.413333 0.426667 5.546667a106.666667 106.666667 0 0 1-124.501334 105.088L599.04 512a42.410667 42.410667 0 0 0 18.773333-5.504z" fill="#9D65E1" p-id="2378"></path><path d="M822.698667 140.501333a42.666667 42.666667 0 1 1 60.330666 60.330667L783.530667 300.373333c4.821333 4.266667 9.514667 8.661333 14.08 13.013334l-114.133334 114.048a198.357333 198.357333 0 0 0-9.728-17.28l-96.469333 96.512a41.472 41.472 0 0 0 21.76 5.376l-105.258667 105.130666a109.525333 109.525333 0 0 1-20.992-5.973333l-62.848 62.890667c5.546667 3.498667 11.306667 6.741333 17.194667 9.728L325.845333 785.066667a427.093333 427.093333 0 0 1-17.152-9.728l-108.117333 108.16a42.538667 42.538667 0 0 1-60.330667 0 42.666667 42.666667 0 0 1 0-60.330667zM319.744 512.042667c0 15.786667 1.706667 31.146667 5.546667 46.08l-109.653334 109.653333c-4.266667 4.266667-9.386667 6.4-15.36 6.4h-0.853333a21.504 21.504 0 0 1-15.317333-7.68 599.04 599.04 0 0 1-18.474667-22.997333l155.605333-155.605334a192.853333 192.853333 0 0 0-1.493333 24.149334z m309.248-302.506667c7.253333 2.133333 12.8 8.106667 14.933333 15.36 1.706667 7.253333-0.426667 14.933333-5.973333 20.053333l-80.64 80.64a192.64 192.64 0 0 0-69.717333-4.053333L605.866667 203.221333c7.68 1.877333 15.36 3.968 23.125333 6.314667z" fill="#A776E4" p-id="2379"></path><path d="M511.658667 192.042667c31.872 0 62.890667 3.584 94.208 11.178666l-118.272 118.314667a192.469333 192.469333 0 0 0-166.357334 166.4l-155.562666 155.605333a611.669333 611.669333 0 0 1-38.314667-56.405333 146.986667 146.986667 0 0 1-0.426667-150.186667c55.466667-91.306667 179.157333-244.906667 384.725334-244.906666z" fill="#BD98EB" p-id="2380"></path></svg></i>
        </el-tooltip>
      </template>
    </el-table-column> -->
    <el-table-column
      label="TYPE" 
      prop="type"
      :formatter="(row, column, cellValue, index)=>cellValue?cellValue:''"
    />
    <el-table-column
      label="GOINGTIME" 
      prop="goingtime"
      :formatter="(row, column, cellValue, index)=>cellValue?cellValue:''"
    />
    <el-table-column
      label="OVERTIME" 
      prop="overtime"
      :formatter="(row, column, cellValue, index)=>cellValue?cellValue:''"
    />
    <el-table-column
      label="SHOW" 
      prop="isShow"
      :formatter="(row, column, cellValue, index)=>cellValue?'显示':'隐藏'"
    />
    <el-table-column
      label="USE" 
      prop="isUse"
      :formatter="(row, column, cellValue, index)=>cellValue?'使用':'删除'"
    />
    
  </el-table>
  <div class=" bg-white p-2 text-right h-12">
    <el-pagination
    v-model:currentPage="filterinfo.pages"
    v-model:page-size="filterinfo.length"
    :default-page-size="10"
    :page-sizes="[10, 15, 20, 25]"
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  />
  </div>
</template>

<script lang="ts" setup >
import { selectcptt,getcpttinfo } from '@/api/oper'
import { onMounted, reactive, ref, toRaw, watch } from 'vue'
import type { ElTable } from 'element-plus'
import { debounce } from 'lodash'
let cptts = ref([])
let total = ref(0)
const tableRef = ref<InstanceType<typeof ElTable>>()
let loading = ref(false)
const filterinfo = reactive({
  /* //过滤
  acc:'',
  email:[],
  authentic:[],
  type:[],
  isUse:[], */
  //页面
  pages:1,
  length:10,
  type:true
})

const debounce_get = debounce(()=>{
  loading.value = true
  selectcptt(filterinfo).then(e=>{ 
    cptts.value = e.cptts
    console.log({cptts:e.cptts})
    total.value = e.total
  }).catch(()=>{}).then(()=>{
    setTimeout(()=>{
      loading.value = false
    },200)
  })
},500)

watch([filterinfo],()=>debounce_get())
onMounted(()=>{
  loading.value = true
  debounce_get()
})


let ctinfo = ref({})
async function expandchange({id:uid},all){
  const oper = all.map(e=>e.id).includes(uid)//展开还是收回?
  if(oper){
    const {ctinfo:req} = await getcpttinfo({uid})
    ctinfo.value[uid] = req
  }else{
    delete ctinfo.value[uid]
  }
}
</script>


<style lang="scss" scoped>
//table
::v-deep .cell{
  white-space: nowrap !important;
  display: flex;
  align-items: center;
}
</style>